import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { devices, dpKit } from './devices';
import './styles/index.less';
import store from '@/redux';
import { getScheduleList } from '@/pages/schedule/utils';
import { updateTimerList } from './redux/modules/scheduleStateSlice';

interface Props {
  devInfo: DevInfo;
  // eslint-disable-next-line react/require-default-props
  extraInfo?: Record<string, any>;
}

interface State {
  devInfo: DevInfo;
}

const composeLayout = (SubComp: React.ComponentType<any>) => {
  return class PanelComponent extends Component<Props, State> {
    async onLaunch(object: any) {
      console.log('=== App onLaunch', object);
      devices.common.init();
      devices.common.onInitialized(device => {
        dpKit.init(device);
        this.initScheduleData();
      });
    }

    async initScheduleData() {
      return getScheduleList().then(timerList => {
        console.log('=== initScheduleData success', timerList);
        store.dispatch(updateTimerList(timerList));
      });
    }

    render() {
      const { extraInfo } = this.props;
      return (
        // @ts-ignore
        <Provider store={store}>
          <SubComp extraInfo={extraInfo} {...this.props} />;
        </Provider>
      );
    }
  };
};

export default composeLayout;
